@import "../pcss/utils.pcss";

.NavView{

	flex: 1;
	/* display: grid;
	grid-template-rows: repeat(auto-fill, 3rem);	
	grid-row-gap: 1rem;
	padding-top: 3rem; */
	padding-top: 3rem; 
	display: flex;
	flex-direction: column;

	a{ 
		@mixin typo-h6{};
		font-weight: 400;
		height: 3rem;
		display: flex;
		padding-left: 2rem;
		align-items: center;
		color: #fff;
		margin-bottom: 1rem;

		&.sel{
			background: rgba(255,255,255,.1);
		}
		&:hover{
			background: rgba(255,255,255,.1);
		}
	}

	section{
		header{
			display: grid;
			grid-template-columns: auto 3rem;
			margin: 1rem 0 1rem 0;
			padding-left: 2rem;
			border-bottom: solid 1px var(--bdr-dark);

			h3{
				@mixin typo-label{};
				color: var(--txt-lighter);
			}
			
			small {
				color: var(--txt-lightest);
				display: flex;
    		align-items: center;
				letter-spacing: .08929em;
				cursor: pointer;
			}
		}
	}
}